Gantt chart (WebWidget)
| The Gantt chart is a tool frequently used in project management to visually estimate or facilitate the time dependencies or scheduling of tasks and events in a project. On the left side of the diagram is a list of tasks and events, with tabular information and, if applicable, a task hierarchy. Each task corresponds to a horizontal bar on the right side of the diagram. The bars illustrate in a tabular calendar how long each task takes, how the tasks are timed, how far they are completed, how they depend on each other, whether they are subject to certain milestones. Colours indicate the different status of the tasks: In progress, failed, completed, suspended, undefined status. In addition, the Gantt chart can calculate and visualise the critical path, which represents the longest chain of time-dependent tasks, the duration of which determines the total project duration due to the lack of a time buffer. |
Example of a Gantt chart
|
Use
Dependencies
- ganttChart.html
- ganttChart-directive.js
- standalone/gantt/
Message interface
When describing the direction, the WebWidget is divided into its two components. The WebWidget implemented in HTML, which implements the presentation logic and user interaction in the browser and the WebWidget implemented in InstantView, which supplies the other side with the data from ClassiX and controls it.
| Name | Parameters | Description |
|---|---|---|
| Push News (IV→HTML) | ||
| holidays | Holidays | Since the Gantt chart has to take into account working days and holidays in its presentation and calculations, it needs to know these regional, company or department-specific data. This message should be sent as the first message to the Gantt Chart widget. It passes a Holidays object to the Web widget as CX_JSON_OBJECT. Newer Holidays messages overwrite the previous settings of older Holidays messages. |
| options | Options | This message passes an options object to the Web widget as CX_JSON_OBJECT and contains general display options of the Gantt chart and can be sent as many times as required, both before and after a data message. |
| permissions | Permissions | This message passes a permission object as CX_JSON_OBJECT to the Web widget and sets the user editing restrictions of the Gantt chart and can be sent as many times as desired, both before and after a data message. Note: since the JavaScript code can be modified by the user in the browser, the InstantView developer must check for himself whether the tasks to be saved may be edited by the user and must not rely on the information provided by MorphIT. |
| action | Action | This message passes an action object to the Web widget as CX_JSON_OBJECT, thereby performing an action on the InstantView Gantt chart, such as displaying the critical path or retrieving task data modified by the user. |
| data | Data | This message passes a data object to the Web widget as CX_JSON_OBJECT and contains all the required data about the tasks and events to be displayed. This message can be sent as often as required, but each time this message is sent again, the old data is overwritten. |
| update | Data | This message passes a data object as CX_JSON_OBJECT to the Web widget and modifies existing tasks and/or dependencies. Non-existing tasks are added, while tasks with the delete property are deleted. Properties of an existing task that have not been overwritten are retained. |
| update_done | NULL | This message is used to hide the waiting progress bar (overlay) that is displayed when the showOverlay option is enabled. In this case it should be sent at the end of the SAVA_DATA_SOCKET and UPDATE_DATA_SOCKET events. |
| Events (HTML→IV) | ||
| INITIALIZE_SOCKET | - | The first message that the WebWidget sends once it has initialised. This indicates that the WebWidget is ready to receive and process push messages. |
| MOUSE_CLICK_SOCKET | JSON string | Fired when the user clicks a bar. parameters: JSON string with the attributes:
|
| DOUBLE_CLICK_SOCKET | JSON string | Fired when the user double-clicks a bar. parameters: JSON string with the attributes:
|
| SAVE_DATA_SOCKET | JSON string | Is fired when the user clicks the "Save" button. Transmitted is a Data-Object, which represents the Gantt chart. If the option showOverlay is activated, a wait progressbar appears until InstantView replies with an update_done message or the timeout elapses if overlayTimeout is set. |
| UPDATE_DATA_SOCKET | JSON string | If the autoUpdate option is enabled, the WebWidget sends the current Data object to ClassiX using this message. This enables the automatic processing of the current data from the Gantt chart using InstantView. If the option showOverlay is activated, a wait progressbar appears until InstantView replies with an update_done message or if overlayTimeout is set, the timeout elapses. |
| GET_LOCALES_SOCKET | JSON string | This message is only sent in proactive mode to reload the missing locale information (holidays and working days) when needed. After sending this message a wait progressbar (overlay) appears until ClassiX replies with a holidays message or the locale timeout expires. After receiving a matching holidays message, the deferred action that triggered the GET_LOCALES_SOCKET message is executed. If localeTimeout is unsuccessful, no action is executed but no error message is displayed. parameters: JSON string with the attributes:
|
The Holidays property
The Holidays object is of type CX_JSON_OBJECT and contains information about the holidays and working days to be taken into account. Highlighted fields are mandatory.
| Field | Type | Description |
|---|---|---|
| startDate | String | This string represents the start date of the time period to which the specifications in workingDays and holidays refer. The date format is exactly the format used by the ClassiX instance. For more information see DateFormat. |
| endDate | String | This string represents the end date of the time period to which the specifications in workingDays and holidays refer. For the date format the same rule applies as for startDate. |
| workingDays | Integer | The weekly working days as integer according to WorkingDays |
| holidays | ARRAY(String) | An array of the dates of holidays in the specified period. The date format is the same as startDate and endDate. The example below illustrates the possibility of using the AllHolidays function to automatically calculate the holidays. |
The Data Object
The data object is of type CX_JSON_OBJECT and primarily contains the tasks to be displayed. Highlighted fields are mandatory.
| Field | Type | Default value | Description |
|---|---|---|---|
| tasks | ARRAY(Task) | - | An array of task objects that represent the tasks in the Gantt chart. |
| dependencies | ARRAY(Dependency) | - | An array of dependency objects that define the dependencies of the tasks on each other in the Gantt chart. |
| selectedTask | Integer | 0 | The ID of the (initially) selected task. |
| Properties that the Data Object only has if it is sent from the Gantt chart to ClassiX Core when saving | |||
| deletedTasks | ARRAY(integer) | - | an array containing the IDs of all possibly deleted tasks |
The task object
The task object is of type CX_JSON_OBJECT and represents a task in the Gantt chart. Highlighted fields are mandatory.
| Field | Type | Default value | Description |
|---|---|---|---|
| id | String | - | The unique ID of a task |
| name | String | - | The title of a task |
| code | String | - | An abbreviation for the task, if available and desired. |
| tooltip | String | - | A tooltip that appears when the mouse pointer hovers over the bar of the task. |
| status | Integer | 0 | The processing status of the task according to this list: 0: Undefined status |
| color | String | "green" | The colour of the task bar in an HTML-compliant format as a string (e.g. "red", "#ff0000", "rgb(255, 0, 0)" or "hsl(0, 100%, 50%)"). |
| readOnly | Boolean | FALSE | If set, the user cannot change anything about the task. Note: since the JavaScript code can be modified by the user in the browser, the InstantView developer must check for himself whether the tasks to be saved may be edited by the user and must not rely on the information provided by MorphIT. |
| dependencies | String | - | A list of comma-separated IDs of the tasks on which this task depends. After each ID you could specify the time buffer between the two tasks in days. Alternatively, one could define the dependencies under the field dependencies on the Data object. Example: "2:5,4,6:3" means that this task depends on the tasks with the IDs 2,4 and 6, with a time buffer of 5, 0 and 3 days respectively to the respective tasks. |
| level | Integer | 0 or 1 | The horizontal indentation of the task to the right. There is at least one root element that has level 0. Depending on the order and the horizontal indentation, the tasks are thus grouped into groups that can be opened and closed. |
| collapsed | Boolean | FALSE | If set and this task has subtasks, this group is collapsed. |
| progress | Integer | 0 | A percentage value, typically between 0 and 100, that indicates and visually represents the progress of a task. Values greater than 100 are also allowed if this should be assigned a special meaning (e.g. in case of overproduction). However, only progress up to 100% is displayed visually. |
| progressLocked | Boolean | FALSE | If set, the editing progress cannot be changed by the user and is for display only. |
| start | String | - | The start date of the task in the data format that is used by default in the ClassiX project. Mandatory for forward and non-automatic scheduling. |
| end | String | - | The end date of the task in the data format that is used by default in the ClassiX project. Mandatory for backward and non-automatic scheduling. |
| duration | Integer | - | The duration of the task in days. |
| startIsMilestone | Boolean | false | If set, the task cannot be executed before the specified start date |
| endIsMilestone | Boolean | false | If set, the task must not exceed the end date calculated from the start date and duration. |
| groupId | String | - | If the auto grouping mode (refer to autoGroup option) is enabled, this ID is used to group the tasks into groups. This ID also appears as the group title. |
| delete | Boolean | false | If set in an update message, this task is deleted. |
| Properties that can only be found in the task object returned by the Gantt chart to ClassiX Core. | |||
| earliestStart | String | - | The calculated earliest start date of this task in the data format of the project |
| earliestFinish | String | - | The calculated earliest end date of this task in the data format of the project |
| latestStart | String | - | The calculated latest start date of this task in the data format of the project |
| latestFinish | String | - | The calculated latest end date of this task in the data format of the project |
| criticalCost | Integer | - | The number of days that this task and all tasks dependent on it take to complete. |
| isCritical | Boolean | - | Is set if this task belongs to the critical path. |
| freeFloat | Integer | - | The free buffer indicates by how many days the end date of this task can be delayed without having to postpone the earliest start date of one of its successors. freeFloat = min(earliestStart of all successors) - earliestFinish Tasks without successors have a free buffer of ZERO. |
| totalFloat | Integer | - | The total buffer of a task is the number of days by which the task can be postponed from its earliest start without jeopardising the end of the project. totalFloat = latestStart - earliestStart |
The dependency object
The Dependency object is of type CX_JSON_OBJECT and represents the dependency of one task on another in the Gantt chart. Highlighted fields are mandatory.
| Field | Type | Default value | Description |
|---|---|---|---|
| from | String | - | The ID of the task from which the dependency originates. |
| to | String | - | The ID of the task into which the dependency goes. |
| buffer | Integer | 0 | The length of the time buffer in days for this dependency. |
| delete | Boolean | false | If set in an update message, this dependency is deleted. |
The option object
| Field | Type | Default value | Description |
|---|---|---|---|
| autoGroup | Boolean | false | If this option is enabled, the tasks are grouped into groups based on their groupId property. The special feature is that the maximum depth of nesting will be 1, i.e. the level property of the individual tasks is not taken into account. Groups and tasks without a group are thus assigned level 0, all other subordinate tasks are assigned level 1. |
| autoComputeCriticalPath | Boolean | false | If activated, the critical path and the corresponding data (earliest start, latest start, ... etc.) are automatically calculated after each change. Otherwise these calculations are only performed when the critical path is displayed and saved (before sending the SAVE/UPDATE_DATA_SOCKET messages). |
| autoUpdate | Boolean | false | If this option is activated, the WebWidget sends an UPDATE_DATA_SOCKET to ClassiX Core after each change. |
| autoScheduling | Boolean | true | Enables or disables automatic termination. This option is only intended to allow the IV developer to disable automatic termination if automatic data correction is not desired. This is usually the case when the Gantt chart should show the status quo. The user can switch automatic scheduling on and off at any time. Automatic scheduling only works along the paths of dependencies and therefore does not change the data of free-standing tasks. |
| autoShrinkCalendar | Boolean | false | When enabled, the calendar area is automatically calculated to be as small as possible and at the same time include all tasks (and today's date depending on the includeToday option) with a time margin. The options viewStartDate and viewEndDate are not ignored. |
| includeToday | Boolean | true | If set, today's date is automatically included and displayed in the calendar area, regardless of the start and end dates of the tasks. |
| isMultiRoot | Boolean | false | By default, the Gantt chart processes a single overall task, so a single root task is assumed. This root task cannot be deleted, because at least one single root task must exist. The first task with level 0 is assumed to be the root task. If isMultiRoot is set to true, any task with level 0 can be considered as one root task and deleted accordingly. This could be useful in auto grouping mode. |
| minEditableDate | String | - | The earliest possible date of a task in the data format of the project. |
| maxEditableDate | String | - | The latest possible date of a task in the data format of the project. |
| completeOnClose | Boolean | true | If set, the progress of a task is automatically set to 100% when the task is given the status "completed". |
| fillWithEmptyRows | Boolean | true | If set, empty lines are added to the tasks until the minimum number of lines in the Gantt chart is reached. |
| minRowsInEditor | Integer | 30 | The minimum number of lines in the Gantt chart. This property has effect only if the option fillWithEmptyRows is activated. |
| overlayTimeout | Integer | 0 | The timeout in milliseconds after which the waiting progress bar displayed with the showOverlay option activated is automatically hidden, independent of any update_done message. 0 means infinite timeout. |
| proactiveMode | Boolean | true | If enabled, the missing holiday information is automatically requested with the message GET_LOCALES_SOCKET. Otherwise, an error message is displayed and the user can only move tasks within the period of time when there is holiday information. |
| localeTimeout | Integer | 10000 | The timeout in milliseconds after which the waiting progress bar displayed when proactive mode is activated is automatically hidden without performing any action or displaying an error message. |
| showSaveButton | Boolean | false | If set, a save button is displayed in the upper right corner of the Gantt chart, which sends a SAVE_DATA_SOCKET message to ClassiX when clicked. |
| showOverlay | Boolean | true | If set, after each UPDATE_DATA and SAVE_DATA event a wait progressbar (overlay) appears until InstantView replies with an update_done message or the timeout expires if overlayTimeout is set. |
| schedulingDirection | Integer | 0 | The termination mode. The following values are allowed: 0: Forward scheduling |
| schedulingDate | String | - | If scheduling at a specific time is desired, this can be specified with this option in the date format of the project. The default value is the earliest start date or the latest end date among all tasks in forward or backward scheduling. |
| viewStartDate | String | - | This option specifies the date on which the viewing area of the calendar should start. You have to consider the interaction with other options like autoShrinkCalendar and includeToday. The starting date is corrected backwards up to one year to achieve a time division that is suitable for all zoom levels. Thus the startDate of the holiday message should ideally be 13 months earlier than viewStartDate . If this option is not set, the start date is calculated automatically. However, to avoid the slow subsequent loading of the holiday information, you should send a sufficient and suitable startDate of the holiday messages. The date format is the date format of the project. |
| viewEndDate | String | - | This option specifies the date on which the calendar's viewing area should end. You have to consider the interaction with other options like autoShrinkCalendar and includeToday. The end date is corrected up to two years forward in order to achieve a time division suitable for all zoom levels. Thus, the endDate of the holiday message should ideally be 25 months later than viewStartDate . If this option is not set, the end date is calculated automatically. However, to avoid the slow subsequent loading of the holiday information, you should send a sufficient and suitable endDate of the holiday messages. The date format is the date format of the project. |
| zoomLevel | Integer | 5 | The zoom level of the right part of the Gantt chart. Values between 0 and 9 are accepted. 0 represents the maximum zoom-in level (representation in days) and 9 the maximum zoom-out level (representation in years). |
The permission object
| Field | Type | Default value | Description |
|---|---|---|---|
| canWrite | Boolean | TRUE | When set to FALSE, the Gantt chart is only used to display tasks and their dependencies. No changes can then be made by the user. This option has the same effect as LOCKED on the WebWidget. |
| canAdd | Boolean | TRUE | Specifies whether the user can add new tasks. |
| canDelete | Boolean | TRUE | Specifies whether the user can delete tasks. |
| canInOutdent | Boolean | TRUE | Specifies whether the user can change the hierarchy of tasks. |
| canMoveUpDown | Boolean | TRUE | Specifies whether or not the user can change the order of tasks. |
| canSeeDep | Boolean | TRUE | Specifies whether the user can view and edit the Dependencies field. These restrictions do not affect the visual editing of dependencies |
| canSeeCriticalPath | Boolean | TRUE | Specifies whether the user can calculate and display the critical path. |
The Action Object
The action object is of type CX_JSON_OBJECT and always has an actionId field that takes an integer number representing a particular action. Depending on the action, additional parameters may be required.
| Action ID | Parameters | Description |
|---|---|---|
| 0 | status | Show/Hide/Toggle-Critical-Path This action shows or hides the critical path, depending on the parameter status. This parameter can have the values "on" for fade in, "off" for fade out or "toggle" for toggle. |
| 1 | none | ToggleShowOnlyCriticalTasks This action hides the critical path, if hidden, and enables or disables the ability to display only the tasks along the critical path. |
| 2 | none | SaveData This action fires the message SAVE_DATA_SOCKET to transfer the (processed and calculated) data from the Gantt chart to ClassiX. |
| 3 | rangeStart, rangeEnd | FitRangeIntoView This action centres a period of time in the middle of the visible area of the Gantt calendar. The zoom level is determined automatically. You can either focus on certain areas - for this you need the parameters rangeStart and rangeEnd in the date format of the project - or you omit the parameters in order to display as many tasks as possible in the visible area of the Gantt calendar centred. |
| 4 | date | ScheduleProject Schedules the project according to the previously set scheduling mode on the date specified by the date parameter. |
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}